<template>
  <div class="app-container clearfix">  
    <h1>{{securitiesData.securitiesName}}</h1>
    <div>{{securitiesData.symbol}}</div>
    <div>{{securitiesData.securitiesAddress}}</div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="基础资料" name="basic">
      <div>
      上市日期：{{securitiesData.marketDate}}
      </div>
      <div>
      成立日期：{{securitiesData.establishDate}}
      </div>
      <div>
      经营范围：{{securitiesData.securitiesBusiness}}
      </div>
      <div>
      公司介绍：{{securitiesData.content}}
      </div>
    </el-tab-pane>
    <el-tab-pane label="发行信息" name="issue">
      
      
    <el-table
      key="policyList"
      v-loading="listLoading"
      :data="policyList"
      stripe
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="合约" width="200">
        <template slot-scope="{row}">
          <span >{{ row.symbol }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日期" width="140">
        <template slot-scope="{row}">
          <span >{{ row.cycle }}</span>
        </template>
      </el-table-column>
      <el-table-column label="摆动" width="100">
        <template slot-scope="{row}">
          <span >{{ row.signal }}</span>
        </template>
      </el-table-column>
      <el-table-column label="趋势" width="100">
        <template slot-scope="{row}">
          <span >{{ row.direction }}</span>
        </template>
      </el-table-column>
      <el-table-column label="趋势2" width="100">
        <template slot-scope="{row}">
          <span >{{ row.lDirection }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提交时间">
        <template slot-scope="{row}">
          <span >{{ row.createdAt }}</span>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination v-show="policyTotal>0" :total="policyTotal" :page.sync="policyFilterForm.page" :limit.sync="policyFilterForm.size" @pagination="getPolicyList" />
    </el-tab-pane>
    <el-tab-pane label="十大股东" name="record">
      
      
    <el-table
      key="shareholderList"
      v-loading="listLoading"
      :data="shareholderList"
      stripe
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="股东名称" min-width="300">
        <template slot-scope="{row}">
          <span >{{ row.symbol }}</span>
        </template>
      </el-table-column>
      <el-table-column label="股东性质" width="140">
        <template slot-scope="{row}">
          <span >{{ row.cycle }}</span>
        </template>
      </el-table-column>
      <el-table-column label="股份类型" width="100">
        <template slot-scope="{row}">
          <span >{{ row.close }}</span>
        </template>
      </el-table-column>
      <el-table-column label="持股数(股)" width="100">
        <template slot-scope="{row}">
          <span >{{ row.low }}</span>
        </template>
      </el-table-column>
      <el-table-column label="占总流通股本持股比例" width="200">
        <template slot-scope="{row}">
          <span >{{ row.high }}</span>
        </template>
      </el-table-column>
      <el-table-column label="增减(股)" width="100">
        <template slot-scope="{row}">
          <span >{{ row.close }}</span>
        </template>
      </el-table-column>
      <el-table-column label="变动比例" min-width="100">
        <template slot-scope="{row}">
          <span >{{ row.volume }}</span>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination v-show="total>0" :total="total" :page.sync="filterForm.page" :limit.sync="filterForm.size" @pagination="getList" />

    </el-tab-pane>
    <el-tab-pane label="价格走势" name="policy">
      
      
    <el-table
      key="realtimeList"
      v-loading="listLoading"
      :data="list"
      stripe
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="合约" width="200">
        <template slot-scope="{row}">
          <span >{{ row.symbol }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日期" width="140">
        <template slot-scope="{row}">
          <span >{{ row.cycle }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开盘价" width="100">
        <template slot-scope="{row}">
          <span >{{ row.close }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最低价" width="100">
        <template slot-scope="{row}">
          <span >{{ row.low }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最高价" width="100">
        <template slot-scope="{row}">
          <span >{{ row.high }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收盘价" width="100">
        <template slot-scope="{row}">
          <span >{{ row.close }}</span>
        </template>
      </el-table-column>
      <el-table-column label="成交量" min-width="100">
        <template slot-scope="{row}">
          <span >{{ row.volume }}</span>
        </template>
      </el-table-column>
      <el-table-column label="成交额" min-width="100">
        <template slot-scope="{row}">
          <span >{{ row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提交时间">
        <template slot-scope="{row}">
          <span >{{ row.createdAt }}</span>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination v-show="total>0" :total="total" :page.sync="filterForm.page" :limit.sync="filterForm.size" @pagination="getList" />
    </el-tab-pane>
  </el-tabs>
    
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {getSecuritiesDetail} from '@/api/knowledge/securities'
import {getQuotationList} from '@/api/knowledge/quotation' 
import {getPolicyList} from '@/api/strategy/policy' 



export default {
  name: 'financeDashboard',
  components: {Pagination  },
  directives: {  },
  filters: {
  },
  data() {
    return {
      activeName:"basic",
      list:[],
      policyTotal:0,
      policyList:[],
      shareholderList:[],
      securitiesData:{},
      policyFilterForm:{
        page: 1,
        symbolType:1,
        size: 20,
        scale:1440,
        symbol:''
      },
      filterForm: {
        page: 1,
        symbolType:1,
        size: 20,
        scale:1440,
        symbol:''
      },
      filterForm: {
        securitiesID: 0
      }
    }
  },
  created() {
    this.filterForm.securitiesID = this.$route.query.securitiesID 
    this.getSecuritiesDetail()
  },
  destroyed () {
  },
  methods: {
    getSecuritiesDetail:function(){
      let _this = this;
      getSecuritiesDetail(_this.filterForm).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            _this.securitiesData = response.data
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    handleFilter:function(){
      this.filterForm.page = 1
      this.activeName = 'basic'
      this.list = []
      this.total = 0
      this.policyTotal = 0
      this.policyList = []
      this.getList()
    },
    handleClick() {
      if(this.activeName == "basic"){
        this.getList()
      }
      if(this.activeName == "policy"){
        this.policyFilterForm.symbol = this.filterForm.symbol
        this.policyFilterForm.symbolType = this.filterForm.symbolType
        this.getPolicyList()
      }
      if(this.activeName == "record"){

      }
        console.log(this.activeName);
    },
    getList:function(){
      let _this = this;
      console.log("期权",_this.filterForm)
      getQuotationList(_this.filterForm).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            _this.list = response.data.list
            _this.total = response.data.total
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    },
    getPolicyList:function(){
      let _this = this;
      console.log("期权",_this.policyFilterForm)
      getPolicyList(_this.policyFilterForm).then((response) => {
        console.log("getList",response)
          if (response.code === 200) {
            _this.policyList = response.data.list
            _this.policyTotal = response.data.total
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
    }
  }
}
</script>
<style>
.filter { float: left; width: 160px; padding: 20px; min-height: 600px; }
.article { float: left; width: 800px; }
.article-item { width: 800px; height: 200px; margin-right: 25px; }
.article-item-text { float: left; width:600px; }
.article-item-icon { float: right; width:200px; height:150px; padding-left: 50px; }
.article-item-icon img { width:100%; height:100%; border-radius: 10px; }
</style>